<script>
	export let point = 0;
	export let steps = 1;
	export let blank = false;
	export let responsive = false;
</script>

<div
	class:fixedSize={!responsive}
	class:full={point >= steps}
	class:half={point >= steps / 2 && point < steps}
>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		xml:space="preserve"
		width="100%"
		height="100%"
		version="1.1"
		style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
		viewBox="0 0 508847 506460"
		xmlns:xlink="http://www.w3.org/1999/xlink"
	>
		<defs>
			<linearGradient id="halfFilled">
				<stop offset="50%" stop-color="transparent" />
				<stop offset="50%" stop-color="#62c5ff" />
			</linearGradient>
		</defs>

		<g id="Layer_x0020_1">
			<metadata id="CorelCorpID_0Corel-Layer" />
			<circle class="fil0" cx="254424" cy="253230" r="235000" />
			<path
				class="fil1"
				d="M255693 0c13547,26247 28024,32190 42571,35155 86821,17695 155401,85552 174155,171983 3340,15397 8488,34162 36428,46862 -23707,12700 -32662,29168 -35212,42704 -17117,90856 -89026,162369 -180088,178895 -13076,2373 -26000,6154 -39547,30861 -11853,-20473 -28814,-28563 -42256,-31076 -92318,-17262 -164722,-91085 -179876,-184128 -1926,-11825 -6468,-24556 -31868,-35563 27093,-10160 29923,-25044 31812,-36761 14555,-90240 82951,-162462 171176,-182650 16150,-3695 39159,-5802 52705,-36282z"
			/>
			<path
				class="fil2"
				d="M255542 30055c11940,23132 24698,28369 37519,30983 76516,15594 136957,75398 153485,151571 2944,13569 7481,30107 32104,41300 -20893,11192 -28785,25706 -31032,37635 -15086,80073 -78460,143098 -158714,157663 -11524,2091 -22915,5423 -34854,27198 -10446,-18043 -25394,-25173 -37240,-27388 -81362,-15213 -145172,-80274 -158528,-162274 -1697,-10422 -5700,-21642 -28085,-31342 23877,-8954 26371,-22072 28036,-32398 12828,-79530 73106,-143180 150860,-160972 14233,-3257 34511,-5114 46449,-31976z"
			/>
			{#if !blank}
				<path
					class="fil1"
					d="M330264 271900c123,-533 12562,-25081 10158,-32020 -1162,-1427 -2401,-2861 -3702,-5015 -10709,-2024 -12079,-25210 -13164,-33686 -14482,-47196 -72342,-40941 -75929,-52261 -358,-5588 -312,-4871 -670,-10459 -7941,-1020 -13237,1312 -15009,8106 -10178,3252 -5167,18577 -5501,26637 -1026,-642 -5493,-4403 -5588,-4447 -15337,-7251 -37943,31295 -36627,45876 -2865,18246 -4687,19434 -13733,25783 -2850,2000 -600,259 -2382,1933l565 8165c13533,41301 39679,48402 77665,53316 -1307,1383 991,2598 -2457,4085 -17607,7585 -16560,12591 -21001,31019 -1670,3686 -3464,12046 -2869,16028 -138,14893 63684,19907 79345,971 1836,-15767 -2789,-25064 -10248,-39071 -6148,-5850 -3857,-7275 -14719,-8437 -5230,-2021 -2896,1743 -3630,-4393 21183,67 46793,-11256 59496,-32130zm-57388 55269c4914,9251 4765,12192 14138,13865 -8154,-4650 -10703,-14461 -18651,-21822 -5039,-2075 -10340,-4118 -13672,-3026 -6579,2156 -10978,6676 -17718,15712 8536,-3503 10646,-9555 18301,-13067 7391,5619 -1300,14794 -3372,23823 -1079,4703 476,9454 2036,12648 -2369,-10300 409,-16090 6895,-17943 3642,6892 3606,8549 8908,12534 -3457,-7528 -12293,-20101 -7056,-29210 3890,-1154 4734,2232 10191,6486zm-30308 -71245c-9691,1465 -6106,3188 -12543,6960 -10988,6437 -14245,-5177 -25718,-6891 2209,18389 33672,21098 38261,-69zm30053 0c9691,1465 6106,3188 12543,6960 10987,6437 14245,-5177 25718,-6891 -2209,18389 -33672,21098 -38261,-69zm-15561 31599c6016,-1307 5913,-1191 7499,-6781 -3798,-269 -10937,-717 -14214,-158 1060,4275 2615,5911 6715,6939z"
				/>
				<path
					class="fil1"
					d="M329531 141779c3037,10634 9793,17203 20000,20000 -10634,3037 -17203,9793 -20000,20000 -3037,-10634 -9793,-17203 -20000,-20000 10634,-3037 17203,-9793 20000,-20000z"
				/>
				<path
					class="fil1"
					d="M165200 297389c2278,7976 7345,12902 15000,15000 -7976,2278 -12902,7345 -15000,15000 -2278,-7976 -7345,-12902 -15000,-15000 7976,-2278 12902,-7345 15000,-15000z"
				/>
				<path
					class="fil1"
					d="M362750 205788c1519,5317 4897,8602 10000,10000 -5317,1519 -8602,4897 -10000,10000 -1519,-5317 -4897,-8602 -10000,-10000 5317,-1519 8602,-4897 10000,-10000z"
				/>
			{/if}

			<path
				class="fil3"
				d="M254424 68164c102209,0 185066,82857 185066,185066 0,102209 -82857,185066 -185066,185066 -102209,0 -185066,-82857 -185066,-185066 0,-102209 82857,-185066 185066,-185066zm0 28190c86640,0 156876,70236 156876,156876 0,86640 -70236,156876 -156876,156876 -86640,0 -156876,-70236 -156876,-156876 0,-86640 70236,-156876 156876,-156876z"
			/>
		</g>
	</svg>
</div>

<style>
	.full svg {
		filter: drop-shadow(0 0 0.5rem rgb(0, 183, 255));
	}

	.fixedSize {
		width: 15vh;
	}
	:global(.mobile) .fixedSize {
		width: 18vh;
	}
	@media screen and (max-width: 500px) {
		.fixedSize {
			width: 10vh;
		}
	}

	.fil1 {
		fill: #fefefe;
	}
	.fil2 {
		fill: #5f6e8b;
	}
	.fil3 {
		fill: transparent;
		transform: rotate(90deg);
		transform-origin: center;
	}
	.full .fil3 {
		fill: #62c5ff;
	}
	.half .fil3 {
		fill: url(#halfFilled);
	}
	.fil0 {
		fill: #a0907d;
	}
</style>
